<div class="triggers-panel-container">
  <div class="triggers-panel-scroll">
    <section class="card-section card-list-layout-list">
      <ol class="card-list">
        <li class="card-item-wrapper" ng-repeat="trigger in ctrl.currentTriggersPage">
          <div class="alert-list card-item zbx-trigger-card">
            <div class="alert-list-body">
              <div class="alert-list-icon alert-list-item-state alert-list-icon--alerting"
                ng-style="{color: trigger.color}">
                <i class="icon-gf" ng-class="ctrl.getAlertIconClass(trigger)"></i>
              </div>
              <div class="alert-list-main">
                <p class="alert-list-title">
                  {{trigger.description}}
                  <span class="zabbix-hostname" ng-if="ctrl.panel.hostField || ctrl.panel.hostTechNameField">
                    <i ng-if="trigger.maintenance" class="fa fa-wrench zbx-maintenance-icon"></i>
                    {{ ctrl.formatHostName(trigger) }}
                  </span>
                  <span class="zabbix-hostname" ng-if="ctrl.panel.hostGroups">
                    {{ ctrl.formatHostGroups(trigger) }}
                  </span>

                  <span class="zbx-trigger-tags" ng-if="ctrl.panel.showTags && trigger.tags">
                    <span ng-repeat="tag in trigger.tags" ng-click="ctrl.addTagFilter(tag, trigger.datasource)"
                      tag-color-from-name="tag.tag+tag.value" class="label label-tag zbx-tag">
                      {{tag.tag}}: {{tag.value}}
                    </span>
                  </span>
                </p>

                <p class="alert-list-text">
                  <span ng-if="ctrl.panel.statusField" class="alert-list-state" ng-class="ctrl.getAlertStateClass(trigger)">
                    {{ctrl.triggerStatusMap[trigger.value]}}
                  </span>
                  <span ng-if="ctrl.panel.severityField" class="alert-list-state" ng-class="ctrl.getAlertStateClass(trigger)"
                    ng-style="{color: trigger.color}">
                    {{trigger.severity}}
                  </span>
                  {{trigger.age && "for " + trigger.age}}

                  <span class="alert-list-info alert-list-info-left zbx-description"
                    ng-if="ctrl.panel.descriptionField && !ctrl.panel.descriptionAtNewLine"
                    ng-bind-html="trigger.comments">
                  </span>
                </p>
                <p class="alert-list-text"
                  ng-if="trigger.comments && ctrl.panel.descriptionField && ctrl.panel.descriptionAtNewLine">
                  <span class="alert-list-info zbx-description" ng-bind-html="trigger.comments">
                  </span>
                </p>
              </div>
            </div>
            <div class="alert-list-footer">
              <div class="trigger-info-block">
                <span ng-if="ctrl.panel.datasources.length > 1" class="alert-list-text zabbix-trigger-source">
                  <i class="fa fa-database"></i>
                  {{trigger.datasource}}
                </span>
                <span class="alert-list-text">{{trigger.lastchange || "last change unknown"}}</span>
              </div>

              <div class="trigger-info-block zbx-status-icons">
                <a ng-if="trigger.url" href="{{trigger.url}}" target="_blank">
                  <i class="fa fa-external-link"></i>
                </a>

                <span ng-if="trigger.state === '1'" bs-tooltip="'{{trigger.error}}'">
                  <i class="fa fa-question-circle"></i>
                </span>

                <ack-tooltip ng-if="trigger.lastEvent" ack="trigger.acknowledges" trigger="trigger"
                  on-ack="ctrl.acknowledgeTrigger" context="ctrl">
                </ack-tooltip>
              </div>
            </div>
          </div>
        </li>
      </ol>
    </section>
  </div>
</div>

<div class="triggers-panel-footer"></div>
